<template>
  <el-dialog :visible.sync="adddialog" :width="dialogWidth" append-to-body @close="close">
      <span>
          <div class="refine_createlog">
            <h2 class="titleblue">{{title}}</h2>
            <div class="contant duty_inset_dialog">
              <el-row v-if="dutylog=='lookDuty'" class="noprint">
                <el-button class="duty_action" @click="getPdf('日志')">导出</el-button>
                <el-button class="duty_action" type="primary" @click="printPage">打印</el-button>
              </el-row>
              <el-form ref="form" :model="form" id="wordd">
                <div id='pdfDom' ref='pdfDom'>
                  <ul class="ul_print">
                    <li class="li-1 li-height-47">所属机构</li>
                    <!-- <li class="li-1" v-if="dutylog=='createDuty'||dutylog=='editDuty'"><el-input placeholder="请填写所属机构" v-model="form.orgId"></el-input>
                </li> -->
                    <li class="li-2 li-height-47 bgcolor-ccc"><span>{{detail.orgid}}</span></li>
                    <li class="li-1 li-height-47">所属部门</li>
                    <!-- <li class="li-1" v-if="dutylog=='createDuty'||dutylog=='editDuty'"><el-input placeholder="请填写所属部门" v-model="form.deptId"></el-input></li> -->
                    <li class="li-2 li-height-47 bgcolor-ccc"><span>{{detail.deptid}}</span></li>
                    <li class="li-1 li-height-47">当前日期</li>
                    <li class="li-2 li-height-47 bgcolor-ccc">
                      <el-date-picker v-model="form.today" align="right" type="date" placeholder="请选择日期" readonly
                                      value-format='yyyy-MM-dd' :picker-options="pickerOptions">
                      </el-date-picker>
                    </li>
                    <!-- <li class="li-3" v-if="dutylog=='lookDuty'||lookdetail">{{detail.today}}</li> -->
                    <li class="li-1 li-height-47">值班人员</li>
                    <li class="li-5 li-height-47" v-if="dutylog=='createDuty'||dutylog=='editDuty'">
                      <el-input placeholder="请输入值班人员" v-model="form.usernames">
                      </el-input>
                    </li>
                    <li class="li-5 li-height-47" v-if="dutylog=='lookDuty'" style="line-height:45px;">{{form.usernames}}</li>
                    <li class="li-1 li-height-47">值班时间</li>
                    <li class="li-5 li-height-47 li-time" v-if="dutylog=='createDuty'||dutylog=='editDuty'">
                      <el-date-picker v-model="detail.dutytime" type="datetimerange" value-format='yyyy-MM-dd HH:mm:ss'
                                      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                                      :default-time="['08:30:00', '08:30:00']">
                      </el-date-picker>
                    </li>
                    <li class="li-5 li-height-47 li-time" v-if="dutylog=='lookDuty'">
                      {{detail.dutytime[0]}}至{{detail.dutytime[1]}}
                    </li>
                    <li class="li-1 h-big h-title" :style="{'line-height':dheight}">值班详情</li>
                    <li class="li-3 h-big height-171" v-if="dutylog!='lookDuty'">
                      <div class="duty-detail createText">
                        <el-input class="textAreaContent" type='textarea' placeholder="请输入值班详情" v-model="form.description"></el-input>
                      </div>
                    </li>
                    <li class="li-3" v-if="dutylog=='lookDuty'" ref='det'>
                      <div class="duty-detail dutyDetail ">
                        <!--<div>{{form.description}}</div>-->
                        <div v-for='(item,index) in description' class='underline' :key='index'>{{item}}</div>
                        <!-- <el-input type='textarea' :rows='7' disabled v-model="form.description" class="disabledIpt"></el-input> -->
                      </div>
                    </li>
                    <li class="li-4">
                      <div class="height-39" :style="{'line-height':lheight}">气象信息</div>
                    </li>
                    <li class="li-3 h-middle width-100 weather_list" v-if="dutylog=='createDuty'||dutylog=='editDuty'">
                      <div class="fl width-80" ref='dH'>
                        <div class="w-div" v-for="(item, index) in detail.weather">
                          <el-input placeholder="请输入气象信息" v-model="item.weather">
                          </el-input>
                          <div class="width-20">
                            <i @click="delWeather(index)" v-if="index !=0">删除</i>
                          </div>
                        </div>
                      </div>
                      <div class="fr width-20"><i class="el-icon-circle-plus-outline" @click="addRow()"></i></div>
                    </li>
                    <li class="li-3 h-middle width-100 weather_list" v-if="dutylog=='lookDuty'">
                      <div ref='dH' class='fl width-80'>
                        <div class="w-div" v-for="(item, index) in detail.weather">
                          {{item.weather}}
                        </div>
                      </div>
                    </li>
                    <li class="li-4">
                      <div class="v-middle" :style="{'line-height':liheight}">待办事项</div>
                    </li>
                    <li class="li-3 h-middle width-100 need_list" v-if="dutylog=='createDuty'||dutylog=='editDuty'">
                      <div class="fl width-80" ref='dH1'>
                        <div class="w-div" v-for="(item, index) in detail.needToBeDealtWith">
                          <el-input placeholder="请输入待办事项" v-model="item.needWith">
                          </el-input>
                          <div class="width-20">
                            <!-- <i  @click="" v-if="index !=0">编辑</i> -->
                            <i @click="item.type=1" v-if="index !=0&&item.type==0">待办</i>
                            <i @click="item.type=0" v-if="index !=0&&item.type==1">已完成</i>
                          </div>
                        </div>
                      </div>
                      <div class="fr width-20"><i class="el-icon-circle-plus-outline" @click="addtbRow()"></i></div>
                    </li>
                    <li class="li-3 h-middle width-100 need_list" v-if="dutylog=='lookDuty'">
                      <div ref='dH1' class='fl width-80'>
                        <div class="w-div" v-for="(item, index) in detail.needToBeDealtWith">
                          {{item.needWith}}
                        </div>
                      </div>
                    </li>
                    <!-- <li class="li-1 h-middle">值班总结</li>
                    <li class="li-3 h-middle" v-if="dutylog=='createDuty'||dutylog=='editDuty'">
                        <el-input type="textarea" :rows="4" placeholder="请输入值班总结" v-model="form.summary">
                        </el-input>
                    </li>
                    <li class="li-3 h-middle" v-if="dutylog=='lookDuty'||lookdetail">{{form.summary}}</li>
                    <li class="li-1 h-report">每日报表</li>
                    <li class="li-3 reports-detail">
                        <p>{{form.orgReport}}</p>
                        <p>
                            <label>VTS监控船舶</label>
                            <el-input placeholder="" v-model="detail.monitor[0]"></el-input>
                            <label>艘次，提供信息服务</label>
                            <el-input placeholder="" v-model="detail.monitor[1]"></el-input>
                            <label>次，</label>
                            <label>纠正船舶违章行为</label>
                            <el-input placeholder="" v-model="detail.monitor[2]"></el-input>
                            <label>艘次；</label>
                        </p>
                        <p>
                            <label>发送海上险情</label>
                            <el-input placeholder="" v-model="detail.monitor[3]"></el-input>
                            <label>起，事故</label>
                            <el-input placeholder="" v-model="detail.monitor[4]"></el-input>
                            <label>起。</label>
                        </p>
                    </li> -->
                  </ul>
                </div>
              </el-form>
              <!-- <el-button @click="lookdetail=true" class="sure" v-show="!lookdetail&&dutylog=='lookDuty'">值班详情</el-button> -->
              <el-row :gutter="24" style="text-align: center;width:100%;display:inline-block;margin:0;"
                      v-if="dutylog!='lookDuty'">
                <el-button @click="save" class="cancel" v-if="dutylog!='lookDuty'">保存</el-button>
                <el-button @click="sure" class="sure">提交</el-button>
                <el-button @click="cancel" class="cancel">取消</el-button>
              </el-row>
              <el-row class="noprint" :gutter="24" v-show="printLook" style="" v-else>
                <el-button @click="lastLog" class="cancel">上一篇</el-button>
                <el-button @click="getData" class="sure">回到原页</el-button>
                <el-button @click="nextLog" class="cancel">下一篇</el-button>
              </el-row>
            </div>
            <el-dialog
              title=""
              :visible.sync="addPerson"
              width="80%"
              append-to-body
              @close="close1"
              class="addPerson"
            >
             <span>
                <h2 class="titleblue">添加人员</h2>
                <ttree title="添加人员发送" ref="outlan" :groupData="groupData" class="tele-tree"></ttree>
                <div class="footerbtn">
                  <el-button type="primary" @click="creatsure" class="sure">添加</el-button>
                  <el-button class="cancel" @click="creatcancel">取消</el-button>
                </div>
             </span>
            </el-dialog>
          </div>
        <!--<router-view @close="close" :adddialog.sync="adddialog" :dutylog="dutylog" :id="ddid" :orgId='orgId' :dialogWidth="dialogWidth"-->
        <!--@changeWidth="changeWidth" ref="dutyInfo" @update='update'></router-view>-->
      </span>
  </el-dialog>
</template>

<script src="./DutyLogEdit.js"></script>

<style>
  .refine_dutylog .contant {
    padding-bottom: 30px
  }

  .refine_dutylog .contant .el-col .search-wrap {
    text-align: right
  }

  .refine_dutylog .contant .intendance-table {
    margin-top: 30px;
    width: 100%;
    display: inline-block
  }

  .refine_dutylog .contant .clear:after {
    content: "";
    display: block;
    clear: both
  }

  .refine_dutylog .plan-operate {
    width: 100%;
    display: inline-block
  }

  .refine_dutylog .sel-div {
    float: right;
    margin-right: 10px
  }

  .refine_dutylog .sel-label {
    margin-left: 10px
  }

  .refine_dutylog .planselect {
    float: right;
    margin-right: 10px
  }

  .refine_dutylog .planselect input {
    width: 122px;
    border-radius: 4px;
    border: 1px solid #ddd
  }

  .refine_dutylog .plansearch {
    float: right;
    width: 270px
  }

  .refine_dutylog .plansearch input {
    width: 200px;
    margin-right: 10px;
    border-radius: 0
  }

  .refine_dutylog .plansearch .el-input-group__append {
    border-left: 1px;
    width: 56px;
    background-color: #0062cd;
    border-radius: 2px;
    font-size: 14px;
    color: #fff;
    padding: 0;
    box-sizing: border-box;
    text-align: center
  }

  .refine_dutylog .el-date-editor {
    width: 180px;
    box-sizing: border-box
  }

  .refine_dutylog .el-date-editor input {
    border-radius: 2px;
    border: 1px solid #ddd
  }

  .refine_dutylog .select-width-100 {
    width: 145px
  }

  .duty_inset_dialog.contant {
    padding: 20px 50px;
    margin: 0 auto
  }

  .duty_inset_dialog .duty_action {
    width: 110px;
    float: right;
    margin-left: 10px
  }

  .duty_inset_dialog .ul_print {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-top: 20px;
    margin-bottom: 30px;
    overflow: hidden
  }

  .duty_inset_dialog .ul_print:after {
    content: "";
    display: block;
    clear: both
  }

  .duty_inset_dialog .ul_print li {
    float: left;
    text-align: center;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    list-style: none;
    box-sizing: border-box
  }

  .duty_inset_dialog .ul_print li.li-1, .duty_inset_dialog .ul_print li.li-2 {
    width: 160px;
    min-height: 47px
  }

  .duty_inset_dialog .ul_print li.li-3 {
    width: 85%
  }

  .duty_inset_dialog .ul_print li.h-middle {
    line-height: 111px
  }

  .duty_inset_dialog .ul_print li.h-big.h-title {
    line-height: 171px;
    overflow: hidden
  }

  .refine_createlog .duty_inset_dialog.contant {
    padding: 20px 0;
    margin: 0 auto;
    width: 962px
  }

  .refine_createlog .duty_inset_dialog .duty_action {
    width: 110px;
    float: right;
    margin-left: 10px
  }

  .refine_createlog .duty_inset_dialog .ul_print {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-top: 20px;
    margin-bottom: 30px;
    overflow: hidden
  }

  .refine_createlog .duty_inset_dialog .ul_print:after {
    content: "";
    display: block;
    clear: both
  }

  .refine_createlog .duty_inset_dialog .ul_print li {
    float: left;
    text-align: center;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    list-style: none
  }

  .refine_createlog .duty_inset_dialog .ul_print li.li-1 {
    width: 160px;
    min-height: 47px;
    line-height: 46px
  }

  .refine_createlog .duty_inset_dialog .ul_print li.li-3 {
    width: 800px;
    min-height: 47px
  }

  .refine_createlog .duty_inset_dialog .ul_print li.li-5 {
    width: 320px;
    min-height: 47px
  }

  .refine_createlog .duty_inset_dialog .ul_print li.li-5 .el-date-editor.el-input__inner {
    border: none;
    width: 100%;
    padding: 3px 0;
    display: block
  }

  .refine_createlog .duty_inset_dialog .ul_print li.li-5 .el-date-editor .el-range__icon {
    display: none
  }

  .refine_createlog .duty_inset_dialog .ul_print li.li-5 .el-date-editor .el-range-separator {
    padding: 0
  }

  .refine_createlog .duty_inset_dialog .ul_print li.li-5 .el-date-editor .el-range-input {
    width: 47%
  }

  .refine_createlog .duty_inset_dialog .ul_print li.h-middle {
    line-height: 111px;
    min-height: 112px
  }

  .refine_createlog .duty_inset_dialog .ul_print li.h-big.h-title {
    line-height: 171px
  }

  .refine_createlog .el-input input {
    border: none;
    text-align: center
  }

  .refine_createlog .el-date-editor.el-input {
    width: 130px
  }

  .refine_createlog .el-input--suffix .el-input__inner {
    padding-right: 0;
    background: transparent
  }

  .refine_createlog .duty-person {
    width: 90%;
    float: left;
    display: block;
    line-height: 46px;
    height: 46px;
    border-right: 1px solid #ccc
  }

  .refine_createlog .add-person {
    width: 10%;
    text-align: center;
    float: left
  }

  .refine_createlog .add-person i {
    font-size: 16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #0062cd;
    color: #0062cd;
    cursor: pointer
  }

  .refine_createlog .el-date-editor.el-input__inner {
    border: none;
    width: 320px;
    padding: 3px 0
  }

  .refine_createlog .el-textarea textarea {
    border: 0;
    resize: none;
  }

  .refine_createlog .duty-detail {
    height: 681px;
    width: 100%;
    display: block;
    line-height: 30px;
    box-sizing: border-box
  }

  .refine_createlog .li-height-47 {
    height: 47px;
    overflow: hidden
  }

  .refine_createlog .duty-detail p {
    width: 100%;
    display: inline-block;
    line-height: 30px;
    text-align: left
  }

  .refine_createlog .h-middle .el-textarea {
    vertical-align: middle
  }

  .refine_createlog .h-report {
    height: 215px;
    line-height: 215px !important
  }

  .refine_createlog .reports-detail {
    line-height: 25px !important;
    padding: 0 10px;
    text-align: left !important;
    height: 215px
  }

  .refine_createlog .reports-detail p label {
    float: left
  }

  .refine_createlog .reports-detail p .el-input {
    width: 80px;
    float: left;
    display: block;
    height: 25px
  }

  .refine_createlog .reports-detail p input {
    border-bottom: 1px solid #333;
    width: 100%;
    border-radius: 0;
    height: 25px
  }

  .refine_createlog .reports-detail p {
    width: 100%;
    display: inline-block
  }

  .refine_createlog .duty-person li {
    border-bottom: none;
    border-left: none;
    padding: 0 10px
  }

  .refine_createlog .height-39 {
    min-height: 38px;
    line-height: 38px
  }

  .refine_createlog .height-40 {
    min-height: 39px;
    line-height: 39px
  }

  .refine_createlog .height-171 {
    height: 689px !important
  }

  .addPerson .main {
    padding: 20px;
    box-sizing: border-box;
    display: block
  }

  .addPerson .tree {
    margin: 78px 55px
  }

  .disabledIpt textarea {
    background-color: #fff !important;
    color: #666 !important;
    cursor: text !important
  }

  .width-80 {
    width: 100%
  }

  .width-20 {
    width: 20%;
    height: 39px;
    line-height: 39px;
    position: absolute;
    right: 0;
    border-left: 1px solid #ccc;
    text-align: center
  }

  .width-20 i {
    cursor: pointer;
    font-style: normal
  }

  .w-div {
    width: 100%;
    float: left;
    vertical-align: top;
    height: 39px;
    border-top: 1px solid #ccc;
    text-align: left;
    padding: 0 10px;
    box-sizing: border-box
  }

  .w-div:first-child {
    border-top: none;
    height: 38px
  }

  .w-div .el-input {
    float: left;
    height: 39px;
    width: 80%
  }

  .w-div .el-input input {
    float: left;
    height: 38px;
    width: 100%;
    text-align: left
  }

  .width-100 {
    position: relative;
    min-height: 39px !important;
    line-height: 38px !important;
    box-sizing: border-box
  }

  .v-middle {
    vertical-align: middle;
    line-height: 39px
  }

  .li-4 {
    width: 160px
  }

  @media only screen and (max-width: 1200px) {
    .refine_createlog .duty_inset_dialog.contant {
      width: 722px
    }

    .refine_createlog .ul_print li.li-1, .refine_createlog .ul_print li.li-2, .refine_createlog .ul_print li.li-4 {
      width: 120px !important
    }

    .refine_createlog .ul_print li.li-5 {
      width: 240px !important
    }

    .refine_createlog .ul_print li.li-3 {
      width: 600px !important
    }

    .refine_createlog .el-input--suffix .el-input__inner {
      padding-left: 10px
    }

    .refine_createlog .li-time, .refine_createlog .ul_print li.li-5 .el-date-editor .el-range-input {
      font-size: 13px;
      letter-spacing: -1px
    }
  }
</style>

<style lang="scss"  src="./DutyLogEdit.scss"></style>
